<template>
  <div class="full-height tab-charts">
    <Card
      style="width: 100%; height: 100%"
      :tab-list="tabList"
      :active-tab-key="activeKey"
      @tabChange="(key) => (activeKey = key)"
    >
      <TopologyDetail class="white-background" v-if="activeKey === 'chaos'" />
      <TpsDetail v-else />
    </Card>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { Card } from "ant-design-vue";
import TopologyDetail from "./TopologyDetail.vue";
import TpsDetail from "./TpsDetail.vue";
export default defineComponent({
  components: {
    Card,
    TopologyDetail,
    TpsDetail,
  },
  setup() {
    const activeKey = ref("chaos");
    const tabList = ref<any[]>([
      {
        key: "chaos",
        tab: "故障信息",
      },
      {
        key: "tps",
        tab: "超时压测",
      },
    ]);

    return {
      activeKey,
      tabList,
    };
  },
  computed: {},
  methods: {},
});
</script>
